<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-07-08 16:49:53
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-07-08 17:38:50
 * @FilePath: \app\src\views\el\questionnaire\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="item" v-for="(item, i) in arr" :key="i">
      <div class="title">{{ item.title }}</div>
      <div class="answer">
        <div
          :class="[
            {
              base_item: true,
              select: select.includes(_item.value),
              success:
                item.select.includes(_item.value) &&
                item.answer.includes(_item.value),
              error:
                item.select.includes(_item.value) &&
                !item.answer.includes(_item.value),
              null:
                !item.select.includes(_item.value) &&
                item.answer.includes(_item.value),
            },
          ]"
          v-for="(_item, _i) in item.option"
          :key="_i"
          @click="hand(_item.value)"
        >
          {{ _item.label }}
        </div>
      </div>
      <el-button type="primary" @click="handSubmit">提交</el-button>
      <el-button @click="reset">重置</el-button>
      <span v-if="item.select.length || item.answer.length">已选：{{ item.select.join(',') }}， 正确答案：{{ item.answer.join(',') }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          title: "问题1",
          option: [
            {
              value: "A",
              label: "A答案",
            },
            {
              value: "B",
              label: "B答案",
            },
            {
              value: "C",
              label: "C答案",
            },
            {
              value: "D",
              label: "D答案",
            },
            {
              value: "E",
              label: "E答案",
            },
          ],
          select: [],
          answer: [],
        },
      ],
      select: [],
    };
  },

  methods: {
    handSubmit() {
      this.arr.map((item) => {
        item.select = [...this.select];
        item.answer = ["B", "C"];
      });
    },
    reset() {
      this.arr.map((item) => {
        item.select = [];
        item.answer = [];
      });
      this.select = [];
    },
    hand(value) {
      if (this.select.includes(value)) {
        this.select = this.select.filter((item) => item != value);
      } else this.select.push(value);
    },
  },
};
</script>

<style lang="less" scoped>
.base_item {
  background-color: #f2f6fc;
  margin-top: 2px;
  &.select {
    background-color: #67c23a;
  }
  &.success {
    background-color: #67c23a;
    color: #fff;
  }
  &.error {
    background-color: #f56c6c;
    color: #fff;
  }
  &.null {
    background-color: #909399;
    color: #fff;
  }
}
</style>